<template>
  <div class="box">
    <img class="title" src="../../assets/img/title.png" alt="" />

    <div class="user-list">
      <a-dropdown-button @click="judgeLogin">
        {{ text }}
        <a-menu slot="overlay" v-if="isShow">
          <a-menu-item key="1" @click="userInfo"><a-icon type="user" />查看信息</a-menu-item>
          <a-menu-item key="2" @click="logout"
            ><a-icon type="user" />退出登录</a-menu-item
          >
          <!-- <a-menu-item key="3"><a-icon type="user" />3rd item</a-menu-item> -->
        </a-menu>
        <a-icon slot="icon" type="user" />
      </a-dropdown-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["value"],
  data() {
    return {
      isShow: "false",
    };
  },
  mounted() {
  },
  methods: {
    async logout() {
      // 清除cookie，删除登录态
      this.$_cookie.delCookie('user');
      this.$_cookie.delCookie('selectedKey');
      const res = await this.$_api.logOut();
      const msg = res.data.message;
      switch(msg){
        case '成功':
          this.$message.success("成功退出登录！");
          this.$router.push("/Login");
          localStorage.removeItem("accessToken")
          break;
        default:
          this.$message.error("退出登录失败，请重试！");
      }
    },
    userInfo(){
      this.$router.push('/userInfo');
    },
    judgeLogin() {
      if (this.text == "欢迎登录") {
        this.$router.push("/login");
      }
    },
  },
  computed: {
    text: function() {
      if (this.value == undefined) {
        this.isShow = false;
        return "欢迎登录";
      } else {
        this.isShow = true;
        return "您好，" + this.value;
      }
    },
  },
};
</script>
<style>
.box {
  background: #045bac;
  width: 100%;
  height: 70px;
  color: white;
box-shadow: 1px 1px 1px 1px rgb(136, 136, 136);
  /* 居中对齐 */
  display: flex;
  /* 实现两边对齐 */
  justify-content: space-between;
  /* 实现垂直居中 */
  align-items: center;
}
.user-list {
  float: right;
  padding-right: 20px;
}
img.title {
  float: left;
  /* width: 20%; */
  width: 280px;
}
</style>
